

import React from 'react';
import { Card, Space, Table, Tag, Tooltip } from 'antd';
import { Icon } from '@/components';
import { dictionary } from '@/modules';
import { ColumnsType } from 'antd/lib/table';
import { MenuController } from '@/controllers';
import { IMenu } from '@/controllers/MenuController';
import { useModulesDetails } from './capabilityHooks';
import { CapabilityButton } from '@/components/capability';
import { useAddModules } from './capabilityHooks/useAddModules';
import styles from './index.module.less';

export default function ModulesManage() {

    const menuController = React.useMemo(() => new MenuController(), [])

    const menu = menuController.useMemo(s => s.menu);

    const columns = React.useMemo(() => {
        return [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: 100,
                ellipsis: true,
            },
            {
                title: '模块名称',
                dataIndex: 'title',
                key: 'title',
                width: 160,
                ellipsis: true,
            },
            {
                title: '简介',
                dataIndex: 'description',
                key: 'description',
                width: 100,
                ellipsis: true,
            },
            {
                title: '关联菜单',
                key: 'menu',
                dataIndex: 'id',
                ellipsis: true,
                render: (id: string) => {
                    return (
                        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                            {
                                menu
                                    .filter(m => m.moduleId === id)
                                    .map(m => toMenuPathString(menu, m.menuId))
                                    .map((path, index) => <Tag key={index} >{path}</Tag>)
                            }
                        </Space>
                    )
                }
            },
            {
                title: '标签',
                dataIndex: 'tag',
                key: 'tag',
                ellipsis: true,
                render: (tags: string) => tags && tags.split(',')
                    .map(tag => <Tag key={tag}>{tag}</Tag>)
            },
            {
                title: '是否弃用',
                dataIndex: 'deprecated',
                key: 'deprecated',
                width: 70,
                render: (deprecated: string) => deprecated
                    ? <Tag color='red'><Tooltip title={deprecated} >是</Tooltip></Tag>
                    : <Tag color='green'>否</Tag>,
            },
            {
                title: '操作',
                dataIndex: 'operation',
                align: 'right',
                width: 70,
                render: (_, r, i) => (
                    <Space className={styles.operation}  >
                        <CapabilityButton type='link' useCapability={useModulesDetails} record={r} index={i} />
                        {/* <CapabilityButton type='link' useCapability={useViewCode} record={r} index={i} /> */}
                    </Space>
                )
            }
        ] as ColumnsType<any>
    }, [menu])

    const dataSource = React.useMemo(() => {
        return Array.from(dictionary.values())
    }, [])

    React.useEffect(() => { menuController.queryMenu() }, [menuController])

    return (
        <div className={styles.modulesManage}>
            <Card className={styles.card} size='small'>
                模块：一个页面和该页面内的功能集合。
            </Card>

            <Card className={styles.card} size='small'>
                <Space style={{ width: '100%', justifyContent: 'end' }} >
                    <CapabilityButton type='primary' icon={<Icon id='I202404161115' />} useCapability={useAddModules} />
                </Space>
            </Card>

            <Table
                columns={columns}
                dataSource={dataSource}
            />
        </div>
    )
}

/**
 * 输出指定id的菜单路径字符串
 * @param menus 菜单数据
 * @param menuId 菜单id
 * @returns 路径字符串
 */
function toMenuPathString(menus: IMenu[], menuId: string, prefix = '') {

    const menu = menus.find(m => m.menuId === menuId);

    if (menu && menu.menuParentId) {
        return toMenuPathString(menus, menu.menuParentId, '/' + menu.menuName + prefix);
    } else if (menu) {
        return '/' + menu.menuName + prefix;
    } else {
        return prefix;
    }
}